import React, { useState } from 'react'
import { PlusOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { Button, Form, Input, Upload, Select } from 'antd';
import { eventBus } from '../utils/eventBus';
import '../assets/style/mine.scss'
import ums from '../apis/ums'
const { Option } = Select;
export default function Login() {
  const [user, setUser] = useState(JSON.parse(localStorage.getItem('user')))
  const [fileList, setFileList] = useState([
    { thumbUrl: 'http://jacklv.cn/images/' + user.imgUrl }
  ]);
  const navigate = useNavigate();
  const normFile = (e) => {
    console.log(e, 123);
    setFileList(e.fileList)
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };
  const onFinish = (values) => {
    // console.log(fileList[0].response.data, 23);
    let url = ''
    if (fileList[0].response !=undefined) {
      url = fileList[0].response.data
    } else {
      console.log(fileList);
      url =user.imgUrl
    }
    console.log('Success:', values);
    ums.saveUserInfo({
      account: values.account,
      userGroup: values.userGroup,//角色不可修改	
      imgUrl: url//当前图片的名字
    }).then(res => {
      console.log(res);
      if (res.code == 1) {
        localStorage.user = JSON.stringify({ account: values.account, role: values.userGroup, imgUrl: url })
          eventBus.emit('update')
        //  localStorage.setItem('user',{account:values.account,role:values.userGroup,imgUrl:url})
      }
    })
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className='divss'>
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        initialValues={{
          account: user.account,
          userGroup: user.role,
          avatar: [{ thumbUrl: 'http://jacklv.cn/images/' + user.imgUrl }]
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{
          maxWidth: 300,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label={<div className='names'>用户名</div>}
          name="account"
          rules={[
            {
              required: true,
              message: '请输入用户名',
            },
          ]}
        >
          <Input placeholder='11' />
        </Form.Item>
        <Form.Item
          label="角色"
          name="userGroup"
          rules={[
            {
              required: true,
              message: '请选择角色!',
            },
          ]}
        >
          <Select placeholder="请选择角色" >
            <Option value="超级管理员">超级管理员</Option>
            <Option value="普通管理员">普通管理员</Option>
          </Select>
        </Form.Item>
        <Form.Item label="头像" name="avatar" valuePropName="fileList" getValueFromEvent={normFile}>
          <Upload name="avatar" action="http://jacklv.cn/users/uploadProfile" headers={{ 'token': localStorage.token }} listType="picture-card">
            {!fileList.length && '选择头像'}
          </Upload>
        </Form.Item>
        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form></div>

  )
}